<template>
	<view>
		<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="flex justify-around">
			<view :class="['text-center padding-sm tab']" >
				<view class="">111</view>
				<view class="">222</view>
				<view class="">333</view>
			</view>
		</view>
		<view class="padding fs-28 u-border-bottom">
			￥198
		</view>
		<view class="padding fs-28 u-border-bottom">
			
			<text class="margin-lr">10cm*20cm</text>
			
		</view>
		<view class="padding fs-28 u-border-bottom">
			
		</view>
		<view class="flex justify-around fixed padding-tb-sm">
			<button class="cu-btn bg-brown lg" type="default">加入购物车</button>
			<button class="cu-btn bg-yellow lg" type="default">立即购买</button>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		onLoad(){
			
		},
		methods: {
			
		},
	}
</script>

<style lang="scss">
.banner{
	height: 600upx;
	swiper-item{
		height: 600upx;
	}
	image{
		width: 100%;
		// height: 600upx;
	}
}
.tab{
	&.active{
		border-bottom: 4upx solid #fae456;
	}
}
.cu-btn.lg{
	width: 46%;
}
</style>
